<template>
	<div class="sidebar">
			<div class="sidebar-title" :style='logo'>HXD 运输管理系统</div>
			<div class="sidebar-box">
			<el-menu 
				:default-active="this.$store.state.activeNav"
			  :collapse="false"
			  
			  class="el-menu-vertical-demo" 
			   background-color="transparent" 
			   :text-color="asideTextColor" 
			   :active-text-color="asideActiveTextColor"
			  >
			  <el-submenu v-if="menu.childList.length > 0"
				  :index="menu.name" 
				  v-for="(menu,menuIndex) in this.$store.state.navMenus" 
				  :key="menuIndex">
				<template slot="title" >
				  <i :class="getClassForMenu(menu)"></i>
				  <span>{{menu.name}}</span>
				</template>
				<el-menu-item 
					:index="subMenu.name" 
					v-for="(subMenu,subMenuIndex) in menu.childList" 
					:key="subMenuIndex" @click="showMain(subMenu)" 
					
					>
				<i :class="getClassForMenu(subMenu)"></i>
				<span>{{subMenu.name}}</span>
				</el-menu-item>
			  </el-submenu>
			  
			  <el-menu-item v-else  
				:index="menuIndex+''" 
				@click="showMain(menu)">
			  	<i :class="getClassForMenu(menu)"></i>
			  	<span slot="title">{{menu.name}}</span>
			  </el-menu-item>
			</el-menu>
		</div>
	</div>
</template>

<script>
	import request from '../../api/request.js'
	import {FIRST_PAGE_ROUTE,PRE_URL}from '../../util/constants.js'
	import RoutePaths from '../../util/constants.js'  //引用模块进来
	
	export default {
		props:{
		   asideTextColor: {
		       type: String,
		       default: '#000000'
		   },
		   asideActiveTextColor: {
		       type: String,
		       default: '#000000'
		   },
		   logo: {
		       type: String,
		       default: '#000000'
		   },
		},
		data(){
			return {
			}
		},
		mounted () {
			var me = this;
			//本地路径
			//let uri = "api/static/monidata/navMenus.json";
		   //初始化 右侧导航栏
		   request.post("/api/system/listMenus").then(
		   	response => {
		   		const result = response.data.childList;
		   		//初始化 给 state中的navMenus
		   		this.$store.dispatch('initNavMenus', result);	
				
				
				// 默认进入首页
				//激活 对应的导航项
				//如果 是首页就默认为0
				let path = "/index";
				this.$store.dispatch('addTab', {name: path, label: '主页',tabName:'index'});
				this.$store.dispatch('setActiveTab',path);
				this.$router.push({path:path});
				this.$store.dispatch('setActiveNav', "0");
				
		   	})
		   
		},
		methods: {
			//拿取 每个节点中的class
			getClassForMenu(menu){
				let className = menu.remark.split(";")[0];
				return className;
			},
			//点击 导航树，显示主要窗口
			showMain(menu){
				let text = menu.name;
				let path = menu.remark.split(";")[1];
				//拿取 keep-alive中缓存的name值,必须要与每个组件的name值一致
				let tabName = menu.remark.split(";")[2];
				
				//添加 tab标签
				this.$store.dispatch('addTab', {
					label:text,
					name:path,
					tabName:tabName
				});
				//显示路由，同时设置活动标签页
				this.$router.push({ path:path });
				this.$store.dispatch('setActiveTab', path);

			},
			// 选择
			selectItem(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);

			}
		},
		computed: {

		}
	}
</script>

<style>

	.sidebar {
	   height: 100%;
	   witdh:100%;
	}
	.sidebar-title {
	  width: 100%;
	  height: 50px;
	  border-bottom: 1px solid #dcdfe6;
	  color: #ffffff;
	  box-sizing: border-box;
	  text-align: center;
	  line-height: 50px;
	  font-size: 16px;
	}
	.sidebar-box {
	  width: 100%;
	  height: calc(100%-50px);
	  overflow-x: hidden;
	  overflow-y: auto;
	  -ms-overflow-style: none;
	  overflow: "-moz-scrollbars-none";
	  scrollbar-width: none; /*  火狐   */
	}
	.sidebar-box::-webkit-scrollbar {
	  display: none; /*  Chrome  */
	  width: 0 !important ; /*  Chrome  */
	}
	.el-menu-vertical-demo:not(.el-menu--collapse) {
	    width: 200px;
	    min-height: 400px;
	  }
	  
	  
  /**
   * 导航栏 被激活以后的样式
   */
  .el-menu-item.is-active {
	  background: #1A86EE !important;
  }
  li.is-active > span {
  	  color:#F7F7F7;
  }
</style>
